import React, {Component, useState} from 'react';
import {Button, Image, View} from '@tarojs/components';
import {AtDivider, AtTabs, AtTabsPane, AtFloatLayout, AtAvatar, AtIcon} from 'taro-ui'
// import check from '../image/check-circle.png';
import invite from '../image/invite.png';
// import write from '../image/write.png';
// import del from '../image/del.png';
import Taro from '@tarojs/taro';

import NavBar from '../fit';
import './necessary.scss';

const Necessary = () => {

  const [current, setcurrent] = useState(0)

  const handleClick1 = (value) => {
    setcurrent(value)
  }
  // const [isOpen, setOpen] = useState(false)
  const [isRight, setRight] = useState(true)
  // const changeOpen = () => {
  //   setOpen(true)
  // }
  const changeRight = () => {
    setRight(!isRight)
  }


  //新增地址
  const handleClick4 = () => {
    Taro.navigateTo({
      url: '/pages/my/necessary/newaddress'
    })
  }


  const handleClick6 = () => {
    Taro.navigateTo({
      url: '/pages/shareCard/shareCard'
    })
  }

  const tabList = [{title: '我的地址'}, {title: '历史浏览'}, {title: '我的孕育信息'}, {title: '积分兑换商城'}, {title: '用户反馈'}]


  //我的地址
  const [list, setList] = useState(
    [
      {
        name: '姓名',
        tel: '电话号码',
        add: '地址地址地址地址地址地址地址地址'
      },
    ]
  )
  const List = list.map(content => (
    <View className="boxbox">
      <View className="box1">
        <View className="conname">{content.name}</View>
        <View className="tel">{content.tel}</View>
      </View>
      <View className="add">{content.add}</View>
      <AtDivider height="40"/>
      <View className="info">
        <View className="info-l">
          <View className="info-ll" onClick={() => {
            changeRight()
          }}>
            {isRight ? (
              <Image className="map-pin" style="width:20px;height:20px;" src={invite}/>
            ) : (
              <Image className="map-pin1" style="width:20px;height:20px;" src={invite}/>
            )}
          </View>
          <View className="info-lr">默认地址</View>
        </View>


        <View className="info-r">
          <Button className="info-rl"  openType="share">
            <Image style="width:20px;height:20px;" src={invite}/>
            <View className="info-rlz">分享</View>
          </Button>

          <view className="info-rz" onClick={handleClick4}>
            <Image style="width:20px;height:20px;" src={invite}/>
            <View className="info-rlz">编辑</View>
          </view>
          <view className="info-rr">
            <Image style="width:20px;height:20px;" src={invite}/>
            <View className="info-rlz">删除</View>
          </view>
        </View>
      </View>
    </View>
  ))


  //历史浏览
  const [list1, setList1] = useState(
    [
      {
        title: '我的营养计划',
        imgsrc: "",
        name: '营养师名字',
        content: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
      },
      {
        title: 'aa',
        imgsrc: "",
        name: 'bb',
        content: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
      },
    ]
  )
  const List1 = list1.map((content) => (
    <View className="list">
      <View className="listlist">
        <View className="title">
          {content.title}
        </View>
        <View className="name">
          <AtAvatar circle
                    size="small"
                    image={content.imgsrc}
          />
          <View className="name1">{content.name}</View>
        </View>
        <View className="content">
          {content.content}
        </View>
        {/*<AtDivider height="50"/>*/}
      </View>
    </View>
  ))


  const handleClick2 = () => {

  }
  const handleClick3 = () => {

  }

  const toBack = () => {
    Taro.navigateBack().then();
  }


  return (
    <View className="box">
      <NavBar
        title=" "
        back={true}
        nback={toBack}
      />
      <View className="box2">我的必备</View>
      <View className="box3">
            <View className="box3box">
              <View className="box31">
                {List}
              </View>

              <View className="box312">
                <Button className="box3121" onClick={handleClick2}>管理</Button>
                <Button className="box3122" onClick={handleClick4}>新增地址</Button>
              </View>
            </View>
      </View>

{List1}



    </View>
  )
}
export default Necessary;
